<template>
  <el-dialog
    v-model="dialogOverflowVisible"
    title="报告路况"
    width="500"
    draggable
    overflow
    :close-on-click-modal="false"
    @open="handleOpen"
  >
    <div class="cart">
      <span>事件类型</span>
      <el-select
        v-model="selectValue"
        placeholder="请选择事件"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span>*</span>
    </div>
    <div class="cart">
      <span>事件地址</span>
      <el-input
        v-model="locationReport"
        placeholder="请输入路况地址，包含事故路段"
        size="large"
        style="width: 240px"
      />
      <span>*</span>
    </div>
    <div class="cart">
      <span>建筑标识</span>
      <el-input
        v-model="buildingReport"
        placeholder="请输入事故最近的建筑标识"
        size="large"
        style="width: 240px"
      />
    </div>
    <div class="cart">
      <span>发生时间</span>
      <el-date-picker
        v-model="timeReport"
        type="datetime"
        :default-value="timeReport"
        size="large"
        style="width: 240px"
      />
      <span>*</span>
    </div>
    <div class="cart">
      <span>事件描述</span>
      <el-input
        v-model="descriptionReport"
        placeholder="请详细描述事件"
        size="large"
        style="width: 240px"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogOverflowVisible = false">取消</el-button>
        <el-button :plain="true" type="primary" @click="handleSubmit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { addReportHttp } from '@/request'
import { useUserDateStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
const { userData } = useUserDateStore()
const selectValue = ref('')
const locationReport = ref('')
const buildingReport = ref('')
const timeReport = ref('')
const descriptionReport = ref('')
// el-dialog打开事件，给日期一个初始值
function handleOpen() {
  timeReport.value = new Date().toLocaleString()
}
const options = [
  {
    value: '碰撞',
    label: '碰撞',
  },
  {
    value: '刮擦',
    label: '刮擦',
  },
  {
    value: '失火',
    label: '失火',
  },
  {
    value: '翻车',
    label: '翻车',
  },
  {
    value: '其他',
    label: '其他',
  },
]
//接收来自父组件v-model的dialogVisible
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  position:{
    type: Array,
  }
})
//事件声明
const emit = defineEmits(['update:modelValue'])
const dialogOverflowVisible = computed({
  get: () => props.dialogVisible,
  set: (val) => {
    emit('update:modelValue', val)
  },
})

const handleSubmit = () => {
  // 验证表单内容
  if (
    selectValue.value === '' ||
    locationReport.value === '' ||
    timeReport.value === ''
  ) {
    ElMessage.error('请完善报告内容')
    return
  }
  // 发送请求，将数据添加到数据库
  console.log(userData.username)
  console.log(selectValue.value)
  console.log(locationReport.value)
  console.log(buildingReport.value)
  console.log(timeReport.value)
  console.log(descriptionReport.value)
  console.log(props.position)
 
  addReportHttp({
    name: userData.username,
    type: selectValue.value,
    address: locationReport.value,
    signage: buildingReport.value,
    time: timeReport.value,
    describe: descriptionReport.value,
    position:props.position,
    status: 0,
  }).then((res) => {
    console.log(res)
  })
  ElMessage.success('添加报告成功')
  dialogOverflowVisible.value = false
  // 重置表单
  selectValue.value = ''
  locationReport.value = ''
  buildingReport.value = ''
  descriptionReport.value = ''
}
</script>

<style lang="scss">
.cart {
  padding: 20px;
  span {
    margin: 0 20px;
    font-weight: 800;
  }
}
.el-input__prefix {
  display: none;
}
</style>
